<template>
    <div>
        <el-form :model="userparams" :rules="rules" ref="reForm" label-width="100px" label-position="left"
            class="mb_46 pr_8">
            <el-form-item label="角色名称：" prop="name">
                <el-input v-model="userparams.name" placeholder="请输入角色名称" />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="userparams.status">
                    <el-radio v-for="dict in statusOptions" :key="dict.value + ''" :label="dict.value">{{ dict.name
                    }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="权限设置">
                <!-- :check-strictly="!form.menuCheckStrictly" -->
                <!-- <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
                <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
                <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> -->
                <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
                    empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
            </el-form-item>
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <el-button type="primary" :loading='saveloading' @click="handleSave">确 定</el-button>
        </div>
    </div>
</template>
<script>
import { getMenuList, addRole, editRole, getMenuInfo } from '@/api/user';
import { handleTree } from '@/utils/index';
export default {
    data() {
        return {
            statusOptions: [{ name: '开启', value: 1 }, { name: '禁用', value: 0 }],
            userparams: {
                name: '',
                status: 1,
                menuId: [],
            },
            rules: {
                name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'change' }],
            },
            menuList: [],//菜单原数据
            menuOptions: [],//菜单树形数据
            defaultProps: {
                children: "children",
                label: "name"
            },
            saveloading: false
        }
    },

    props: {
        roleId: {
            default: ''
        },
        roletype: {
            type: Number,
            default: 1
        },
        dataList: {
            default: {}
        }
    },

    async created() {
        await this.getMenuList();
        // console.log('roleId:',this.dataList,this.roleId,this.roletype);
        if (this.roletype == 2 && this.roleId) {
            this.getMenuInfo();
        }
    },

    methods: {
        // 获取详情
        getMenuInfo() {
            let checkedList = this.dataList.checked;
            this.userparams.name = this.dataList.role.name;
            this.userparams.status = this.dataList.role.status;
            let checkArr = [];
            this.menuList.forEach(menu => {
                let checkname = menu.app.toLocaleLowerCase() + '/' + menu.controller.toLocaleLowerCase() + '/' + menu.action.toLocaleLowerCase();
                if (checkedList.includes(checkname)) {
                    checkArr.push(menu.id);
                }
            })
            checkArr.forEach((v) => {
                this.$nextTick(() => {
                    this.$refs.menu.setChecked(v, true, false);
                })
            })
            // getMenuInfo({id:this.roleId}).then(res=>{
            //     if(res.code == 1){
            //         let checkedList = res.data.checked;
            //         this.userparams.name=res.data.role.name;
            //         this.userparams.status=res.data.role.status;
            //         let checkArr = [];
            //         this.menuList.forEach(menu=>{
            //             let checkname = menu.app.toLocaleLowerCase()+'/'+menu.controller.toLocaleLowerCase()+'/'+menu.action.toLocaleLowerCase();
            //             if(checkedList.includes(checkname)){
            //                 checkArr.push(menu.id);
            //             }
            //         })
            //         checkArr.forEach((v) => {
            //             this.$nextTick(()=>{
            //                 this.$refs.menu.setChecked(v, true ,false);
            //             })
            //         })
            //     }
            // })
        },

        getMenuList() {
            return getMenuList().then(res => {
                this.menuList = res.data;
                this.menuOptions = handleTree(res.data);
            })
        },

        handleCancle(type) {
            this.$emit('close', type)
        },

        // 编辑确定按钮
        handleSave() {
            this.$refs.reForm.validate(valid => {
                if (!valid) return;
                this.saveloading = true;
                this.userparams.menuId = this.getMenuAllCheckedKeys();
                // console.log('this.form.menuId:',this.form.menuId);
                if (this.roletype == 1) {//新增
                    addRole(this.userparams).then(res => {
                        if (res.code === 1) {
                            this.$message.success('添加成功');
                            this.handleCancle(1)
                        }
                        this.saveloading = false;
                    })
                } else {
                    editRole({ ...this.userparams, id: this.roleId }).then(res => {
                        if (res.code === 1) {
                            this.$message.success('编辑成功');
                            this.handleCancle(1)
                        }
                        this.saveloading = false;
                    })
                }
            })
            // this.$refs.reForm.validate(valid=>{
            //     if(!valid) return;
            //     this.handleCancle(1)
            // })
        },

        // 所有菜单节点数据
        getMenuAllCheckedKeys() {
            // 目前被选中的菜单节点
            let checkedKeys = this.$refs.menu.getCheckedKeys();
            // 半选中的菜单节点
            let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys;
        },
    }
}
</script>
<style lang="scss" scoped>
.tree-border {
    margin-top: 5px;
    border: 1px solid #e5e6e7;
    background: #FFFFFF none;
    border-radius: 4px;
}

</style>
<style lang="scss">
::v-deep .pr_8{
    padding-right: 8px;
}
</style>